<template>
  <div>
    <Title :title="'路口流量详情'"/>
    <div class="box">
      <div :class="hover === item.id? 'itemBgHover itemBg' : 'itemBg'" v-for="item in dataList" :key="item.name" @click="handleEntrance(item)">
        <div class="itemBgFlex">
          {{ item.desc }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed, watch } from 'vue';
import Title from './title.vue'
import { useUserStore } from '@/store/user';
// import { xiaoche } from '@/assets/images/imagesIn'
import { getJunctionFlows } from '../../../utils/apiComponent'

export default defineComponent({
  name: 'ComponentOne',
  components: {
    Title
  },
  setup() {
    const data = reactive({
      hover: '1',
      dataList:[{
        // icon: xiaoche,
        id: '1',
        name: '虞河路东进口',
        total: 14,
        unit: '辆'
      }, {
        // icon: xiaoche,
        id: '2',
        name: '虞河路东进口',
        total: 14,
        unit: '辆'
      }, {
        // icon: xiaoche,
        id: '3',
        name: '虞河路东进口',
        total: 14,
        unit: '辆'
      }, {
        // icon: xiaoche,
        id: '4',
        name: '虞河路东进口',
        total: 14,
        unit: '辆'
      }]
    })
    const initData = () => {
      getJunctionFlows().then((res) => {
        // console.log(res)
        res.forEach((element, index) => {
          element.id = (index + 1) + ''
        });
        data.dataList = res
      })
    }
    const userStore = useUserStore()
    // 获取搜索路口值
    const searchValue = computed(() => {
      initData()
      return userStore.getSearchValueId
    })
    watch(searchValue, () => {})

    onMounted(() => {
      // initData()
    })
    const refData = toRefs(data)
    const handleEntrance = (item) => {
      data.hover = item.id
    }
    return {
      ...refData,
      handleEntrance
    }
  }
})
</script>

<style lang="less" scoped>
.box{
  width: 100%;
  height: 128px;;
  background-image: url('@{publicPath}static/images/componenttwo/img_moren.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 30px;;
}
.itemBgFlex{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;;
}
.itemBg{
  width: 46%;
  height: 56px;
  // padding: 0 7px;
  margin-right: 14px;;
  font-size: 16px;;
  // background-image: url('@{publicPath}static/images/bg_ganzhiduixiagn.png');
  display: inline-block;
  // background: rgba(48,81,120,0.4);
  // border: 1px solid rgba(90,176,237,0.4);
  margin: 3px 13px;
  cursor: pointer;
  // align-items: center;
  // justify-content: space-between;
}
.itemBg.itemBgHover{
  background-image: url('@{publicPath}static/images/componenttwo/sel.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

</style>